<template>
  <div>
    <vol-box :lazy="true" :fullscreen="false" v-model="dialogVisible" title="表达式编辑" :height="800" :width="1200" :padding="1" :draggable="true">
      <div>
        <el-row>
          <el-col style="height:40vh" :span="12"><el-scrollbar>
              <div class="grid-content bg-purple"> <el-table highlight-current-row :data="jsgf_item" @row-dblclick="dbclick_left" style="height:40vh"  @row-click="get_one_item">
                  <el-table-column prop="mobbh" label="技术模板号" width="180">
                  </el-table-column>
                  <el-table-column prop="shuom" label="名称" width="180">
                  </el-table-column>
                  <el-table-column prop="tezheng" label="编码">
                  </el-table-column>
                </el-table></div>
            </el-scrollbar></el-col>
          <el-col :span="12">
            <el-table :data="select_item" style="height:30vh"  @row-dblclick="dbclick_right">
                  <el-table-column prop="xuanx" label="选项值编码" width="180">
                  </el-table-column>
                  <el-table-column prop="shuoM_1" label="选项值" width="180">
                  </el-table-column>
                  
                </el-table>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark"><el-button @click="this.btn(' = ')" >=</el-button><el-button @click="this.btn(' and ')" >and</el-button><el-button @click="this.btn(' or ')">or</el-button><el-button  @click="this.btn(' not ')">not</el-button><el-button  @click="this.btn(' in ')">in</el-button>
            <el-button @click="this.btn(' () ')">()</el-button><el-button  @click="this.btn(' &lt;&gt; ')">&lt;&gt;</el-button><el-button @click="this.btn(' , ')">,</el-button><el-button @click="this.btn(' { } ')">{ }</el-button></div>
          </el-col>
        </el-row>
       <el-row>
          <el-col :span="24">
            <div class="bg-purple-light">
                <el-form :inline="false" :model="curr_data" class="demo-form-inline">
                
                 <el-form-item  label="表达式">
                 
                  <el-input  id="textarea" placeholder="表达式" :rows="2" v-model="bds">  <template #append>
            <el-button @click="search_one" type="primary">
               <!--  <el-icon style="vertical-align: middle">
                  <Search />
                </el-icon> --> </el-button ><!-- 自定义按钮 图标 -->
      </template></el-input>
                </el-form-item>
                 <el-form-item label="表达式说明">
                  <el-input  placeholder="表达式说明" :rows="2" v-model="bds_remark"  type="textarea"  disabled></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="qingk">清空</el-button>
                  <el-button type="primary" @click="xiaoyan">表达式翻译</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row> 
      </div>
      <template #footer>

        <div>
          <el-button type="primary" size="mini" v-show="isshow1" @click="get_all_req_list">保存</el-button>
          <el-button type="default" size="mini" @click="dialogVisible = false">关闭</el-button>
        </div>
      </template>
    </vol-box>
  </div>
</template>
<script>
import VolBox from "@/components/basic/VolBox.vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import abc from "@/uitils/h_common.js";//这是默认的写法

export default {
  components: { VolBox, abc, ElMessageBox, ElMessage },
  data() {
    return {
      dialogVisible: false,
      isshow1: true,
      jsgf_item: [],
      select_item: [],
      curr_left:{},
      curr_right:{},
      bds:"",
      bds_remark:"",
    };
  },
  setup() { },
  destroyed() { },
  mounted() {
    this.$nextTick(() => {
      //console.log(this.$store.getters.data().MOBBH);
    });
  },
  methods: {
    show_w() {
      this.$nextTick(() => {
        this.dialogVisible = true;
        //console.log(this.$store.getters.data().MOBBH);
        //this.$refs.Erp_mara.$refs.grid.clearSelection();
      });
    },
    get_data_for_out(curr_row) {//给外部调用用于取数,取数之后，再显示界面
      var turl = "/api/yg_jsgf_head/get_jsgf_item?MOBBH=" + this.$store.getters.data().MOBBH;
      this.http.post(turl, {}, true).then((s) => {
        this.jsgf_item = s.all_yg_jsgf_item;//规范明细
        this.zid_table = s.yg_xx_list;
        this.jsgf_item.forEach(item => {
          let tt = this.zid_table.filter(x => { return item.tezheng == x.tezm });
          item.select_item = tt

        })
        //console.log(this.zid_table);
        //console.log(this.jsgf_item);
        //取数
        console.log(curr_row);
        this.bds_remark=curr_row.biaodssm;
        this.bds=curr_row.biaods;
        this.show_w();
      })
    },
    get_one_item(row){
        this.select_item.splice(0,this.select_item.length);
        let t=this.jsgf_item.find(item =>{
            return item.tezheng==row.tezheng
            });
            for (let index = 0; index < t.select_item.length; index++) {
                
                const element = t.select_item[index];
               // console.log(element);
                this.select_item.push(element)
            }
         
    },
 /*    dbclick_left(row){
       // console.log(row);
       if(this.bds!=""){
           this.bds=this.bds+" "+row.tezheng
           //this.insertVariable(this.bds+" "+row.tezheng)
       }else{
        this.bds=row.tezheng
        // this.insertVariable(row.tezheng)
       }
        //this.bds_remark=this.bds_remark+row.shuom
    }, */
    dbclick_left(row){
       // console.log(row);
       this.insertVariable(" "+row.tezheng+" ");//在光标处插入字符
    },
    dbclick_right(row){
        //console.log(row);
        this.insertVariable(" "+row.xuanx+" ");//在光标处插入字符
       /*  if(this.bds!=""){
          this.bds=this.bds+" "+row.xuanx
        }else{
          this.bds=row.xuanx
        } */
        //this.bds_remark=this.bds_remark+row.shuoM_1
    },
    qingk(){
        this.bds=""
        this.bds_remark=""
    },
    btn(ls){
        //this.bds=this.bds+ ls
        this.insertVariable(ls) 
        //this.bds_remark=this.bds_remark+ls
    },
    xiaoyan(){
      console.log(this.zid_table);
      this.bds_remark=this.bds
      for (let index = 0; index < this.zid_table.length; index++) {
        const element = this.zid_table[index];
        //console.log(element.tezm+"="+element.shuom);
        //console.log(this.bds);
        this.bds_remark=this.bds_remark.replaceAll(element.tezm,element.shuom).replaceAll(element.xuanx,element.shuoM_1)
        //console.log(tt);
      }
      //this.bds_remark=tt
      //this.bds
    },
    async insertVariable(value) {//在光标处插入字符,value为插入的字符
      const myField = document.querySelector('#textarea');
      // const myField = this.$refs.singleText;
      console.log('myField--',myField);
      if(myField.selectionStart || myField.selectionStart === 0) {
        let startPos = myField.selectionStart;
        let endPos = myField.selectionEnd;
        this.bds= myField.value.substring(0, startPos) + value
                    + myField.value.substring(endPos, myField.value.length);
        await this.$nextTick() // 这句是重点, 圈起来
        myField.focus();
        myField.setSelectionRange(endPos + value.length, endPos + value.length);
      } else {
        this.bds = value;
      }
    },
    
  }
};
</script>
<style lang="less" scoped>
.el-row {
  margin-bottom: 5px; //行间距
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>